<template>
    <div class="person">
      姓：<input type="text" v-model="firstName"> <br>
      名：<input type="text" v-model="lastName"> <br>
      全名：<span>{{fullName}}</span> <br>
      <button @click="changeFullName">全名改为：li-si</button>
    </div>
  </template>

<script setup lang="ts">
import { ref,computed} from 'vue';

let firstName = ref("zhang")
let lastName = ref("san")

/* //计算属性——只读取，不修改
let fullName = computed(()=>{
    return firstName.value + '-' +lastName.value
}) */

  // 计算属性——既读取又修改

  let fullName = computed({
    //读取
    get(){
      return firstName.value + '-' + lastName.value
    },

    //修改
    set(val){
      console.log("有人修改了fullname",val)
      firstName.value = val.split('-')[0]
      lastName.value = val.split('-')[1]
    }
  })


function changeFullName(){
  fullName.value = 'li-si'
}
 
</script>

<style scoped>
.person {
    background-color: aqua;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>